// 所有和仓库相关的逻辑 都写在 store/index.js中
// 导包
import Vue from 'vue'
import Vuex from 'vuex'
import setting from './modules/setting'
import user from './modules/user'

// use使用
Vue.use(Vuex)

// Vuex是个对象  里面有个构造函数 Store()   obj: {fn() {}}  obj.fn()

// 创建一个仓库 仓库里有数据

const store = new Vuex.Store({
  // 1. state: 存放数据的地方
  // state 状态 可以提供数据, 类似.vue组件中的data
  // 区别在于.vue的data是组件自己的数据, state是整个项目所有组件共享的数据
  state: {
    count: 100,
    car: '兰博基尼',
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  // 2. mutations
  // 改变state中数据的唯一途径
  // 不能够进行异步操作
  mutations: {
    // mutations内部都是函数  函数的第一个参数 是state属性 第二个参数 (载荷) 可以是个对象
    addCount (state) {
      state.count += 1
      // 不能在里面调接口  使用定时器
    },
    subCount (state) {
      state.count -= 1
    },
    addN (state, payload) {
      // payload形参 , 可以随意命名a, b
      // 传进来的是什么  payload接收的就是什么
      // obj: {num: 5, car: '小黄车}
      // state.count += payload.num
      // state.car = payload.car
      state.count += payload
    }
  },
  // 3. actions
  // 可以进行异步操作
  // 修改数据得提交mutation
  // context参数是当前实例可以拿到state commit等方法和对象
  actions: {
    setAsyncCount (context) {
      console.log('context', context)
      setTimeout(() => {
        context.commit('addCount')
      }, 3000)
    },
    setAsyncCountN (context, num) {
      console.log('context', context)
      setTimeout(() => {
        context.commit('addN', num)
      }, 1000)
    }
  },
  // 4. getters
  // 类似计算属性   计算的是state中的数据
  getters: {
    listLength (state) {
      return state.list.length
    }
  },

  // 5.modules
  modules: {
    setting,
    user
  },

  // 就当没学过,工作中千万别写(了解 )
  strict: true
})

// 导出
export default store
